import { useState } from 'react'
import { Form, Input, Switch, Checkbox } from 'antd';
import IconPicker from '../components/IconPicker';
import MessageLabel from '../components/MessageLabel';
import GlobalMessageComponent from '../components/GlobalMessageComponent';
import Abstract from '../components/Abstract';
import ProcessGroups from '../components/ProcessGroups';
import { formNameVerification } from '../../utils';

export default function Process(props: any) {
    const { processData, controlData } = props;
    const [iconPickerVisiable, setIconPickerVisiable] = useState(false);

    return (
        <>
            <Form.Item label='流程标识' name='processDefinitionKey' >
                <Input readOnly />
            </Form.Item>
            <Form.Item
                label='流程名称'
                name='processName'
                rules={formNameVerification}
                className='process-designer-form-item-required'
            >
                <Input />
            </Form.Item>
            <Form.Item label='流程图标' name='proLcon'>
                <IconPicker visible={iconPickerVisiable} onCancel={() => setIconPickerVisiable(false)} showIconSize={false} />
            </Form.Item>
            <Form.Item
                label='所属分组'
                name='groupId'
                rules={[{ required: true, message: '所属分组不能为空' }]}
                className='process-designer-form-item-required'
            >
                <ProcessGroups />
            </Form.Item>
            <Form.Item label='自动审批规则' name='jumpRule' className='bpmn-custom-properties-radio-wrap'>
                <Checkbox.Group options={[
                    {
                        label: '所有发起人合并（所有节点中审批人为发起人时，自动审批）',
                        value: 'samePrevStartActSkip',
                    },
                    {
                        label: '相邻审批人合并（相邻节点的审批人相同时，自动审批）',
                        value: 'samePrevActSkip',
                    },
                    {
                        label: '所有审批人合并（所有节点中审批人相同时，自动审批）',
                        value: 'samePrevAllActSkip',
                    },
                    {
                        label: '接口批量审批（所有的节点不打开表单，执行快速审批操作）',
                        value: 'batchApproval',
                    },
                ]}>
                </Checkbox.Group>
            </Form.Item>
            <Form.Item label='审批摘要设置' name='abstract'>
                <Abstract controlData={controlData} />
            </Form.Item>
            <div style={{ fontSize: 14, fontWeight: 'bold', color: '#333', marginBottom: 15, userSelect: 'none' }}>退回指派人规则</div>
            <Form.Item label='退回指派人' name='isReturnToDesignator' valuePropName='checked'>
                <Switch />
            </Form.Item>
            <div style={{ fontSize: 14, fontWeight: 'bold', color: '#333', marginBottom: 15, userSelect: 'none' }}>消息通知</div>
            <Form.Item
                label={<MessageLabel label='任务到达通知' description='当节点有新的待办事项时，对该节点的审批人发送提醒' />}
                name='reachMsg'
                labelCol={{ span: 16 }}
                wrapperCol={{ span: 8 }}
            >
                <GlobalMessageComponent controlData={controlData} title='任务到达通知' />
            </Form.Item>
            <Form.Item
                label={<MessageLabel label='任务待领通知' description='当节点类型为待领且有待办事项时，对该节点的审批人发送提醒' />}
                name='candidateMsg'
                labelCol={{ span: 16 }}
                wrapperCol={{ span: 8 }}
            >
                <GlobalMessageComponent controlData={controlData} title='任务待领通知' />
            </Form.Item>
            <Form.Item
                label={<MessageLabel label='任务指派通知' description='当节点被指派，对该节点的被指派人发送提醒' />}
                name='assignMsg'
                labelCol={{ span: 16 }}
                wrapperCol={{ span: 8 }}
            >
                <GlobalMessageComponent controlData={controlData} title='任务指派通知' />
            </Form.Item>
            <Form.Item
                label={<MessageLabel label='任务退回通知' description='当任务被退回时，将对被退回的节点审批人或申请人发送提醒' />}
                name='returnMsg'
                labelCol={{ span: 16 }}
                wrapperCol={{ span: 8 }}
            >
                <GlobalMessageComponent controlData={controlData} title='任务退回通知' />
            </Form.Item>
            <Form.Item
                label={<MessageLabel label='任务超时通知' description='待办中的超时预警提醒条件触发后，对节点审批人进行提醒' />}
                name='timeOutMsg'
                labelCol={{ span: 16 }}
                wrapperCol={{ span: 8 }}
            >
                <GlobalMessageComponent controlData={controlData} title='任务超时通知' />
            </Form.Item>
            <Form.Item
                label={<MessageLabel label='流程催办通知' description='被催办时，将对当前节点的审批人进行提醒' />}
                name='urgingMsg'
                labelCol={{ span: 16 }}
                wrapperCol={{ span: 8 }}
            >
                <GlobalMessageComponent controlData={controlData} title='流程催办通知' />
            </Form.Item>
            <Form.Item
                label={<MessageLabel label='流程终止通知' description='当节点被终止时，对发起人进行提醒' />}
                name='cancelMsg'
                labelCol={{ span: 16 }}
                wrapperCol={{ span: 8 }}
            >
                <GlobalMessageComponent controlData={controlData} title='流程终止通知' />
            </Form.Item>
            <Form.Item
                label={<MessageLabel label='流程结束通知' description='流程结束后，对发起人进行结果通知，包含：已通过、已拒绝' />}
                name='endMsg'
                labelCol={{ span: 16 }}
                wrapperCol={{ span: 8 }}
            >
                <GlobalMessageComponent controlData={controlData} title='流程结束通知' />
            </Form.Item>
        </>
    )
};